<!--
 * @Author: 赵广成 76118299@qq.com
 * @Date: 2024-10-10 11:55:23
 * @LastEditors: 赵广成 76118299@qq.com
 * @LastEditTime: 2024-11-14 16:51:09
 * @FilePath: \tianhe\src\components\course.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

  <el-dialog v-model="outerVisible" title="赛程编辑" width="800">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane label="赛程" name="1">
        <span style="float: right;">
            <el-button @click="addCourse">新增赛程</el-button>
        </span>
 <el-timeline style="max-width: 600px">
 
 
    <el-timeline-item    v-for="(item, index) in courseList"
    :key="index" :timestamp="dayjs(item.courseStartTime).format('YYYY-MM-DD')" placement="top">
      <el-card>
       
        <div>
        {{  dayjs(item.courseStartTime).format('hh:mm') }}-{{dayjs(item.courseEndTime).format('hh:mm')}}
        {{item.courseName}}
        </div>
    <el-row >
    <el-col :span="4">
        <div>
            <img style="width:80px;height:80px;border:none;" :src="getServerUrl()+'/'+item.masterFootballIcon">
        {{item.masterFootballName}}
        </div>
         
    </el-col>
    <el-col :span="4">{{item.courseMasterTeamNum }}</el-col>
    <el-col :span="4"><div>VS</div> <div>{{item.coruseStatus }}</div></el-col>
    <el-col :span="4">{{item.courseAwayTeamNum }}</el-col>
    <el-col :span="4">
        <div>
            <img style="width:80px;height:80px;border:none;" :src="getServerUrl()+'/'+item.awayFootballIcon">
            {{item.awayFootballName}}
        </div>
    </el-col>
  </el-row>
  <span style="float: right;">
  <el-button type="primary" size="small" @click=" editCourse(item)" :icon="Edit"  />
  <el-button type="danger" size="small" @click=" deleteCourse(item.id)" :icon="Delete"  />
</span>
      </el-card>
    </el-timeline-item>
  </el-timeline>
    </el-tab-pane>
    <el-tab-pane label="整场回放" name="2"></el-tab-pane>
    <el-tab-pane label="精彩集锦" name="3"></el-tab-pane>
    <el-tab-pane label="球队" name="4">
      <el-card  v-for="(item, index) in footballList">
        <div>
            <img style="width:80px;height:80px;border:none;" :src="getServerUrl()+'/'+item.footballIcon">
            {{item.footballName}}
        </div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="积分" name="5">Task</el-tab-pane>
  </el-tabs>

    <el-dialog v-model="innerVisible" width="500" title="创建赛程"  append-to-body>
<el-form :model="courseFrom"  :rules="rules" ref="courseRef" label-width="auto" style="max-width: 600px">
   
   <el-form-item prop="courseName" label="赛程名称">
     <el-input v-model="courseFrom.courseName" placeholder="请输入赛程名称"></el-input>
   </el-form-item>
   <el-form-item prop="courseStartTime" label="开始时间">

   <el-date-picker
   v-model="courseFrom.courseStartTime"
   type="datetime"
   placeholder="选择开始时间"
   clearable/>
   </el-form-item>
   <el-form-item label="结束时间" prop="courseEndTime" >
           <el-date-picker
       v-model="courseFrom.courseEndTime"
       type="datetime"
       placeholder="选择开始时间"
       clearable/>
     </el-form-item>
     <el-form-item label="主场队" prop="courseMasterTeam" >
        <el-select 
        v-model="courseFrom.courseMasterTeam"
        filterable
        remote
        :remote-method="remoteMethod"
        :loading="loading"
         placeholder="主场队">
         <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.footballName"
          :value="item.id"/>
      </el-select>
     </el-form-item>
     <el-form-item label="主场得分" prop="courseMasterTeamNum" >
       <div style="margin: 20px 0" />
       <el-input v-model="courseFrom.courseMasterTeamNum"  placeholder="主场得分"/>
     </el-form-item>
     <el-form-item label="客场队" prop="courseAwayTeam" >
        <el-select 
        v-model="courseFrom.courseAwayTeam"
        filterable
        remote
        :remote-method="remoteMethod"
        :loading="loading"
         placeholder="客场队">
         <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.footballName"
          :value="item.id"/>
      </el-select>
     </el-form-item>

     <el-form-item label="客场得分" prop="courseAwayTeamNum" >
       <div style="margin: 20px 0" />
       <el-input v-model="courseFrom.courseAwayTeamNum"  placeholder="请输入比赛地址"/>
     </el-form-item>
     </el-form>
     <template #footer>
          <div class="dialog-footer">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click=" submitForm()">
              提交
            </el-button>
          </div>
        </template>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref} from "vue";
import request,{getServerUrl} from "@/util/request";
import  { ElMessageBox ,ElMessage} from 'element-plus'
import {
 
  Delete,
  Edit,
 
} from '@element-plus/icons-vue'
import dayjs from "dayjs"
const contestId=ref('')
const options = ref([])
const outerVisible = ref(false)
const innerVisible = ref(false)
const activeName = ref('1')
const courseFrom=ref({
    id:'',
    contestId:contestId,
    courseName:'',
    courseStartTime:'',
    courseEndTime:'',
    courseMasterTeam:'',
    courseMasterTeamNum:'0',
    courseAwayTeamNum:'0',
    courseAwayTeam:''
})
 
const loading = ref(false)
const courseRef = ref(null);
const queryForm=ref({
            query:contestId,
            pageNum:1,
            pageSize:100
         })
const total=ref(0);

const footballList =ref([])
const getFootball = ()=>{
  request.get("course/getFootballList/"+contestId.value).then(res=>{
                    if(res.data.code==200){
                      footballList.value  =res.data.data
                    }else{
                      footballList.value = []
                    }
                    })
}
const handleClick = (tab, event) => {
    if(tab==4){
      getFootball();
    }
}
const show=(cid)=>{

    contestId.value=cid
    initUserList();
    outerVisible.value=true;
}
const validateEndTime=(rule, value, callback) =>{
      if (courseFrom.value.courseStartTime && value < courseFrom.value.courseStartTime) {
        callback(new Error('结束时间不能小于开始时间'));
      } else {
        callback();
      }
    }

const rules = {
  courseName: [
        { required: true, message: '请输入赛程名称', trigger: 'blur' }
      ],
      courseStartTime: [
        { required: true, message: '请输入赛程开始时间', trigger: 'blur' }
      ],
      courseEndTime: [
        { required: true, message: '请输入赛程结束时间', trigger: 'blur' },
        // { validator: validateEndTime, trigger: 'change' }
        { validator: validateEndTime, trigger: 'change' }
      ],
      courseMasterTeam: [
        { required: true, message: '请选择主场队', trigger: 'blur' }
      ],
      courseAwayTeam: [
        { required: true, message: '请选择客场队', trigger: 'blur' }
      ],
      videoConverPath: [
        { required: true, message: '请上传视频封面', trigger: 'blur' }
      ]
    };







const hide=()=>{outerVisible.value=false;}
const addCourse=()=>{innerVisible.value=true;}
const courseList=ref([])
const initUserList=async ()=>{
           const res= await request.post("/course/list",queryForm.value)
           courseList.value=res.data.data.dataList;
           total.value=res.data.data.total;
         }

const remoteMethod = (param) => {
            if (param) {
                loading.value = true
                setTimeout(() => {
                loading.value = false
                request.get("football/getListByType/"+param).then(res=>{
                    if(res.data.code==200){
                        options.value  =res.data.data
                    }else{
                        options.value = []
                    }
                    })
                
                }, 200)
            } else {
                options.value = []
            }
        }

 const submitForm = () => {

  courseRef.value.validate((valid) => {
        if (valid) {

          request.post("course/saveOrUpdate",courseFrom.value).then(res=>{
           if(res.data.code==200){
            initUserList()
            resetForm();
            ElMessage.success("新增成功")
           }else{
            ElMessage.error(res.data.msg);
           }
          })
        } else {
          return false;
        }
      });
    };

    const editCourse=(item)=>{
      let obj=  Object.assign({}, item);
       courseFrom.value.id=obj.id;
       courseFrom.value.contestId=obj.contestId;
       courseFrom.value.courseName=obj.courseName;
       courseFrom.value.courseStartTime=obj.courseStartTime;
       courseFrom.value.courseEndTime=obj.courseEndTime;
       courseFrom.value.courseMasterTeam=obj.courseMasterTeam;
       courseFrom.value.courseMasterTeamNum=obj.courseMasterTeamNum;
       courseFrom.value.courseAwayTeamNum=obj.courseAwayTeamNum;
       courseFrom.value.courseAwayTeam=obj.courseAwayTeam;
       innerVisible.value = true;

    }
    const deleteCourse=(id)=>{
  
                ElMessageBox.confirm(
              '确认删除',
              'Warning',
              {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
              }
            ).then(() => {
              request.get("course/delCourseById/"+id).then(res=>{
                if(res.data.code==200){
                  initUserList()
                  ElMessage.success("删除成功")
                }else{
                  ElMessage.error(res.data.msg);
                }
          })
      })

    }
    const resetForm = () => {
        courseFromRef.value.resetFields()
        innerVisible.value = false
    }




defineExpose({
  show,
  hide
});
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
